html
  width: 100%
  height: 100%
  text-rendering: optimizeLegibility
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale

body
  width: 100%
  height: 100%
  margin: 0
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif
  font-size: 14px
  word-break: normal
  word-wrap: break-word

ul, li
  margin: 0
  padding: 0
  list-style: none

a
  color: #00b7ff
  background: transparent

@keyframes rotate
  0%
    transform: rotate(0deg)
  100%
    transform: rotate(360deg)

.swiper-container
  width: 100%
  height: 100%

.wrap
  width: 100%
  height: 100%
  background: url("../images/bg-1.jpg") no-repeat
  background-size: cover
  position: relative
  overflow: hidden
  .logo
    width: 288px
    height: 98px
    background: url("../images/logo.png") no-repeat
    position: absolute
    left: 60px
    top: 20px
  .legend
    position: absolute
    left: 110px
    top: 220px
    width: 120px
    height: 195px
    background: url("../images/legend-bg.png") no-repeat
    background-size: cover
    box-sizing: border-box
    padding: 20px 15px 20px 10px
    .item
      margin: 10px 0
      color: #fff
      div
        width: 100%
        display: flex
        align-items: center
        justify-content: flex-start
    .icon
      display: block
      width: 40px
      height: 40px
      &.yidong
        background: url("../images/yidong.svg") no-repeat
        background-size: cover
      &.liantong
        background: url("../images/liantong.svg") no-repeat
        background-size: cover
      &.dianxin
        background: url("../images/dianxin.svg") no-repeat
        background-size: cover
  .title
    position: absolute
    top: 38px
    left: 37%
    width: 397px
    height: 169px
    background: url("../images/title-bg.png") no-repeat
    background-size: cover
    p
      position: absolute
      bottom: 0
      right: 50px
      margin: 0
      font-size: 18px
      color: #fff
  .score
    position: absolute
    top: 24px
    right: 60px
    width: 455px
    height: 363px
    background: url("../images/score-bg.png") no-repeat
    background-size: cover
    display: flex
    align-items: center
    justify-content: center
    p
      font-size: 72px
      color: rgba(255, 255, 255, .8)
      font-weight: 600
  .apply-panel
    position: absolute
    bottom: 100px
    left: 80px
    width: 338px
    height: 308px
    box-sizing: border-box
    padding: 72px 72px 36px 32px
    overflow: hidden
    background: url("../images/apply-bg.png") no-repeat
    background-size: cover
    .time
      font-size: 16px
      font-weight: bold
      margin-left: -10px
      color: #fff
    .list-container
      position: relative
      overflow: hidden
      height: 205px
      .list
        position: absolute
        width: 100%
        left: 0
        top: 0
        .item
          color: transparent
          font-size: 20px
          height: 40px
          line-height: 40px
          display: flex
          justify-content: space-between
          &:nth-child(1)
            color: rgba(255, 255, 255, 1)
          &:nth-child(2)
            color: rgba(255, 255, 255, .8)
          &:nth-child(3)
            color: rgba(255, 255, 255, .6)
          &:nth-child(4)
            color: rgba(255, 255, 255, .4)
          &:nth-child(5)
            color: rgba(255, 255, 255, .2)
  .rank
    position: absolute
    right: 200px
    top: 450px
    width: 206px
    height: 43px
    background: url("../images/top-title.png") no-repeat
    background-size: cover
  #map, #chart
    width: 100%
    height: 100%
    margin: 0 auto
  .mask
    position: absolute
    top: 0
    right: 0
    bottom: 0
    left: 0
    background-color: rgba(0, 0, 0, .5)
  .galaxy
    width: 1534px
    height: 676px
    margin: 0 auto
    background: url("../images/bg-3.png") no-repeat
    background-size: cover
    position: absolute
    top: 260px
    left: 50%
    transform: translateX(-50%)
    .pannel
      position: relative
      width: 132px
      height: 74px
      background: url("../images/number-panel.png") no-repeat
      background-size: cover
      padding: 12px 16px
      box-sizing: border-box
      p
        margin: 0
      .label
        font-size: 16px
        color: #fefefe
      .value
        font-size: 26px
        color: #00d2ff
    .channel-name
      font-size: 28px
      color: #fff
      margin: 0 0 5px 0
      font-weight: normal
    .channel-offline
      position: absolute
      top: 240px
      left: -80px
      width: 246px
      height: 116px
      background: url("../images/channel-offline.png") no-repeat
      background-size: cover
      .inner-box
        position: absolute
        right: -23%
        top: -136%
        .pannel:after
          content: ''
          position: absolute
          top: 50%
          left: -52px
          display: block
          width: 52px
          height: 118px
          background: url("../images/channel-offline-line.png") no-repeat
          background-size: cover
    .channel-mobile
      position: absolute
      top: -20px
      right: -7%
      width: 470px
      height: 269px
      background: url("../images/channel-mobile.png") no-repeat
      background-size: cover
      .inner-box
        position: absolute
        right: 50%
        top: -40%
        .pannel:after
          content: ''
          position: absolute
          top: 50%
          right: -16px
          display: block
          width: 16px
          height: 133px
          background: url("../images/channel-mobile-line.png") no-repeat
          background-size: cover
    .channel-online
      position: absolute
      top: -50px
      left: 20%
      width: 369px
      height: 206px
      background: url("../images/channel-online.png") no-repeat
      background-size: cover
      .inner-box
        position: absolute
        left: 10%
        top: -80%
        .pannel:after
          content: ''
          position: absolute
          top: 50%
          right: -34px
          display: block
          width: 34px
          height: 134px
          background: url("../images/channel-online-line.png") no-repeat
          background-size: cover
    .channel-appstore
      position: absolute
      bottom: 5%
      right: 5%
      width: 254px
      height: 186px
      background: url("../images/channel-appstore.png") no-repeat
      background-size: cover
      .inner-box
        position: absolute
        left: 25%
        top: -80%
        .pannel:after
          content: ''
          position: absolute
          bottom: -61px
          right: 50%
          display: block
          width: 1px
          height: 61px
          background: url("../images/channel-appstore-line.png") no-repeat
          background-size: cover
    .channel-android
      position: absolute
      bottom: -10%
      left: 4%
      width: 815px
      height: 343px
      background: url("../images/channel-android.png") no-repeat
      background-size: cover
      .inner-box
        position: absolute
        left: 40%
        top: -30%
        .pannel:after
          content: ''
          position: absolute
          bottom: -95px
          right: 50%
          display: block
          width: 1px
          height: 95px
          background: url("../images/channel-android-line.png") no-repeat
          background-size: cover
    .sun
      width: 867px
      height: 852px
      background: url("../images/sun.png") no-repeat
      background-size: cover
      position: absolute
      top: -180px
      left: 50%
      transform: translateX(-50%)
      z-index: 10
  .chart-title
    position: absolute
    top: 480px
    left: 50%
    transform: translateX(-50%)
    width: 1314px
    height: 163px
    background: url("../images/chart-title.png") no-repeat
    background-size: cover
    box-sizing: border-box
    padding: 0 470px 0 400px
    color: #fff
    display: flex
    justify-content: space-between
    align-items: center
    .chart-info
      h3
        font-size: 20px
        margin: 0 0 20px
        font-weight: normal
      p
        font-size: 18px
        margin: 0 0 10px
      strong
        font-size: 40px
        text-shadow: 0 0 50px rgba(255, 255, 255, .6)
      .green
        color: #91ff25
      .blue
        color: #00d2ff
  .pie-wrap
    position: absolute
    top: 100px
    width: 800px
    display: flex
    justify-content: space-between
    .title
      position: absolute
      left: 50%
      top: 40px
      transform: translateX(-50%)
      width: 150px
      height: 226px
    .pie-box
      width: 100%
      height: 100%
    .left-pie-a, .left-pie-b
      position: relative
      width: 360px
      height: 360px
      background: url("../images/circle-1.png") no-repeat
      background-size: cover
      padding: 80px
      box-sizing: border-box
      .track
        position: absolute
        left: 0
        right: 0
        top: 0
        bottom: 0
        width: 100%
        height: 100%
      .track-1
        background: url("../images/circle-2.png") no-repeat
        background-size: cover
        animation: rotate 45s infinite linear forwards
      .track-2
        background: url("../images/circle-3.png") no-repeat
        background-size: cover
        animation: rotate 60s infinite linear reverse
      .track-3
        background: url("../images/circle-4.png") no-repeat
        background-size: cover
        animation: rotate 30s infinite linear forwards
  .left-pie
    left: 100px
    .title
      background: url("../images/pie-title1.png") no-repeat
      background-size: cover
  .right-pie
    right: 100px
    .title
      background: url("../images/pie-title2.png") no-repeat
      background-size: cover